<!--
 * @Author: your name
 * @Date: 2017-08-04 15:54:18
 * @LastEditTime: 2019-12-13 18:03:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /courseware_echarts/02/bar.html
 -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>bar</title>
    <!-- 引入 echarts.js -->
    <script src="../echarts.min.js"></script>
</head>

<body style="background: #1C162E;">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 700px;height:500px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var colorList = [{
            top: '#5A7BEF',
            bottom: '#4048EF'
        }, {
            top: '#F15887',
            bottom: '#FE9B86'
        }, {
            top: '#4048EF',
            bottom: '#5A7BEF'
        }, {
            top: '#2DC9EB',
            bottom: '#14D2B8'
        }, {
            top: '#fff',
            bottom: '#fff'
        }, {
            top: '#645AFF',
            bottom: '#A573FF'
        }, {
            top: '#F15887',
            bottom: '#FE9B86'
        }]
        var option = {
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },

            xAxis: [{
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                    alignWithLabel: true
                },
                axisLine: {
                    show: false,

                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    color: 'rgba(255,255,255,.23)'
                }
            }],
            yAxis: [{
                type: 'value',
                show: false
            }],
            series: [{
                name: '直接访问',
                type: 'bar',
                barWidth: 8,
                label: {
                    show: true,
                    position: 'top',
                    color: '#fff',
                    formatter: "$ {c}"
                },
                itemStyle: {
                    barBorderRadius: 5,
                    color: function (params) {
                        var index = params.dataIndex
                        return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: colorList[index].top
                        }, {
                            offset: 1,
                            color: colorList[index].bottom
                        }], false)
                    }

                },
                barMinHeight: 20,
                data: [3, 52, 200, 334, 390, 330, 220]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>